/**
 * Calendar App
 *
 * @copyright 2019 Georg Ehrke <oc.list@georgehrke.com>
 *
 * @author Georg Ehrke
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
 *
 * You should have received a copy of the GNU Affero General Public
 * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

.app-sidebar,
.event-popover .popover__inner {
	.app-sidebar-header__figure {
		height: unset !important;
	}

	.app-sidebar-header__action {
		margin-top: 0 !important;
		max-height: none !important;
		flex-wrap: wrap;

		div {
			flex-shrink: 0;
		}
	}

	/** Hide the submit button for the title, because it does not trigger a save */
	.app-sidebar-header__desc {
		.rename-form {
			button {
				display: none;
			}
		}
	}

	.editor-invitee-list-empty-message,
	.editor-reminders-list-empty-message,
	.editor-invitee-list-no-email-configured-message,
	.repeat-option-set-summary-read-only {
		margin-top: 20px;

		&__icon {
			background-size: 50px;
			height: 50px;
			width: 50px;
			margin: 0 auto;
			opacity: .5;
		}

		&__caption {
			margin-top: 8px;
			text-align: center;
			color: var(--color-text-lighter);
		}
	}

	.editor-invitee-list-no-email-configured-message {
		&__icon {
			font-size: 50px;
			line-height: 1em;
			user-select: none;
		}
	}

	.editor-reminders-list-new-button {
		width: 100%;
		background-position-x: 8px;
	}

	.app-sidebar-tab {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		&__buttons {
			padding-top: 14px;

			button {
				width: 100%;
			}
		}
	}

	.property-title-time-picker-loading-placeholder {
		width: 100%;

		&__icon {
			margin: 0 auto;
			height: 62px;
			width: 62px;
			background-size: 62px;
		}
	}

	.app-sidebar__loading-indicator {
		width: 100%;
		margin-top: 20vh;

		&__icon {
			margin: 0 auto;
			height: 44px;
			width: 44px;
			background-size: 44px;
		}
	}

	.repeat-option-set {
		.repeat-option-set-section {
			&:not(:first-of-type) {
				margin-top: 20px
			}

			&--on-the-select {
				display: flex;
				align-items: center;

				.multiselect {
					width: 100%;
					min-width: 75px !important; // Set a lower min-width
				}
			}

			&__title {
				list-style: none;
			}

			&__grid {
				display: grid;
				grid-gap: 0;

				.repeat-option-set-section-grid-item {
					padding: 8px;
					border: 1px solid var(--color-border-dark);
					text-align: center;
					margin: 0;
					border-radius: 0;
				}
			}
		}

		&--weekly,
		&--monthly {
			.repeat-option-set-section {
				&__grid {
					grid-template-columns: repeat(7, auto);
				}
			}
		}

		&--yearly {
			.repeat-option-set-section {
				&__grid {
					grid-template-columns: repeat(4, auto);
				}
			}
		}

		&--interval-freq {
			display: flex;
			align-items: center;

			.multiselect,
			input[type=number] {
				min-width: 75px;
				width: 25%;
			}
		}

		&--end {
			margin-top: 20px;
			display: flex;
			align-items: center;

			.repeat-option-end {
				&__label,
				&__end-type-select {
					display: block;
					min-width: 75px;
					width: 25%;
				}

				&__until {
					min-width: 75px;
					width: 50%
				}

				&__count {
					min-width: 75px;
					width: 25%;
				}
			}
		}

		&--summary {
			display: flex;
			justify-content: space-between;
			line-height: 34px;
		}

		&__label {
			margin-right: auto;
		}
	}

	.repeat-option-warning {
		display: flex;
		align-items: center;
		margin-top: 20px;

		&__icon {
			height: 32px;
			width: 32px;
			min-width: 32px;
			min-height: 32px;
			background-size: 32px;
		}

		&__info {
			text-align: center;
		}
	}

	.property-title-time-picker {
		width: 100%;

		&__time-pickers,
		&__all-day {
			display: flex;
			align-items: center;
		}

		&__time-pickers {
			justify-content: space-between;

			.mx-datepicker {
				width: 49%;

				.mx-input-append {
					background-color: transparent !important;
				}
			}

			&--readonly {
				.property-title-time-picker-read-only-wrapper {
					display: flex;
					align-items: center;
					width: 50%;
					margin: 3px 3px 3px 0;
					padding: 8px 7px;
					background-color: var(--color-main-background);
					color: var(--color-main-text);
					outline: none;

					&__icon {
						margin-left: 8px;
						height: 16px;
						width: 16px;
						opacity: .3;

						&--highlighted {
							opacity: .7;
						}

						&:focus,
						&:hover {
							opacity: 1;
						}
					}
				}
			}
		}

		@media screen and (max-width: 1500px) {
			&__time-pickers {
				display: block;
			}

			.mx-datepicker {
				width: 100%;
			}

			.property-title-time-picker-read-only-wrapper {
				width: 100%;
			}
		}

		&__all-day {
			justify-content: flex-start;
		}

		.datetime-picker-inline-icon {
			margin-top: 17px;
			opacity: .3;
			border: none;
			background-color: transparent;
			border-radius: 0;
			padding: 6px !important;

			&--highlighted {
				opacity: .7;
			}

			&:focus,
			&:hover {
				opacity: 1;
			}
		}
	}

	.property-alarm-new {
		width: 100%;
	}

	.property-alarm-item {
		display: flex;
		align-items: center;
		min-height: 44px;

		&__icon {
			width: 32px;
			height: 32px;
			background-color: var(--color-border-dark);
			border-radius: 50%;

			.icon {
				opacity: .7;
				height: 32px;
				width: 32px;
				background-size: 20px;
			}
		}

		&__label {
			padding: 0 8px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		&__options {
			margin-left: auto;
			display: flex;
			align-items: center;
			white-space: nowrap;
		}

		&__edit {
			padding: 0 8px;
			display: flex;
			align-items: center;
			width: 100%;

			input[type=number] {
				width: 4em;
			}

			&--timed {
				.multiselect {
					width: 100%;
				}
			}

			&--all-day {
				justify-content: space-between;

				.multiselect {
					width: unset !important; // TODO - remove
					min-width: 8em !important;
				}

				.before-at-label {
					margin: 0 auto;
				}

				.mx-datepicker {
					width: 8em !important;
				}
			}

			&--absolute {
				.mx-datepicker {
					width: 100% !important;
				}
			}
		}
	}

	.invitees-search {
		width: 100%;

		.invitees-search-list-item {
			display: flex;
			align-items: center;

			&__label {
				width: 100%;
				padding: 0 8px;

				&--with-multiple-email,
				&--single-email {
					div:nth-child(1) {
						color: var(--color-main-text)
					}
				}

				&--with-multiple-email {
					div:nth-child(2) {
						color: var(--color-text-lighter);
						line-height: 1;
					}
				}
			}
		}
	}

	.invitees-list-item {
		display: flex;
		align-items: center;
		min-height: 44px;

		&__displayname {
			margin-left: 8px;
		}

		&__actions {
			margin-left: auto;
		}

		&__organizer-hint {
			color: var(--color-text-maxcontrast);
			font-weight: 300;
			margin-left: 5px;
		}
	}

	.avatar-participation-status {
		position: relative;
		height: 38px;
		width: 38px;

		&__indicator {
			position: absolute;
			bottom: 0;
			right: 0;
			background-size: 10px;
			height: 15px;
			width: 15px;
			box-shadow: 0 0 3px grey;
			border-radius: 50%;
		}

		&__indicator.accepted {
			background-color: #2fb130;
		}

		&__indicator.declined {
			background-color: #ff0000;
		}

		&__indicator.tentative {
			background-color: #ffa704;
		}

		&__indicator.delegated,
		&__indicator.no-response {
			background-color: grey;
		}
	}

	.property-text,
	.property-select,
	.property-color,
	.property-select-multiple,
	.property-title {
		display: flex;
		width: 100%;
		align-items: flex-start;

		&__icon,
		&__info {
			height: 34px;
			width: 34px;
			margin-top: 5px;
		}

		&__info {
			opacity: .5;
		}

		&__info:hover {
			opacity: 1;
		}

		&__icon {
			margin-left: -5px;
			margin-right: 5px;
		}

		&__input {
			flex-grow: 2;

			textarea,
			input,
			div.multiselect {
				width: 100%
			}

			&--readonly {
				div {
					width: 100%;
					white-space: pre-line;
					margin: 3px 3px 3px 0;
					padding: 8px 7px;
					background-color: var(--color-main-background);
					color: var(--color-main-text);
					outline: none;
				}

				a.linkified {
					text-decoration: underline;

					&::after {
						content: ' ↗';
					}
				}
			}

			&--readonly-calendar-picker {

				div.calendar-picker-option {
					margin: 3px 3px 3px 0;
					padding: 8px 7px;
				}
			}
		}
	}

	.property-color {

		&__input {
			display: flex;
		}

		&__color-preview {
			border-radius: var(--border-radius);
			height: 34px !important;
			width: 34px !important;
		}
	}

	.property-text {
		&__input {
			textarea {
				resize: none;
			}
		}
	}

	.property-select-multiple {
		.property-select-multiple__input.property-select-multiple__input--readonly {
			width: 100%;

			.property-select-multiple-colored-tag-wrapper {
				align-items: center;
				overflow: hidden;
				max-width: 100%;
				position: relative;
				padding: 3px 5px;

				.multiselect__tag {
					line-height: 20px;
					padding: 1px 5px;
					background-image: none;
					display: inline-flex;
					align-items: center;
					border-radius: 3px;
					max-width: fit-content;
					margin: 3px;
				}
			}
		}
	}

	.property-title {
		&__input,
		&__input input {
			font-size: 20px;
		}
	}

	.illustration-header {
		max-height: 150px;
		height: 150px;
		width: 100%;
	}

	.illustration-header svg {
		width: 100%;
		height: 150px;
		padding: 8px 8px 0 8px;
	}
}

.timezone-popover-wrapper {
	.popover__inner {
		padding: 20px;
	}

	&__title {
		margin-bottom: 8px;
	}

	&__timezone-select {
		min-width: 200px;
	}
}

.event-popover {
	.popover__inner {
		text-align: left;
		max-width: 450px;
		width: 450px;
		padding: 5px 8px;

		.empty-content {
			margin-top: 0 !important;
			padding: 50px 0;
		}

		.illustration-header {
			height: 100px;
			overflow: hidden;
			margin-bottom: 5px;
			background-color: var(--color-background-dark);
			// There is probably a more elegant solution for this
			margin-top: -5px;
			margin-left: -8px;
			width: 466px;
			border-top-left-radius: var(--border-radius);
			border-top-right-radius: var(--border-radius);
		}

		.popover__inner {
			max-width: unset !important;
		}

		.property-title-time-picker {
			margin-bottom: 12px;
		}

		.event-popover__buttons {
			margin-top: 8px;
			display: flex;

			button {
				width: 100%;
			}
		}

		.event-popover__top-right-actions {
			position: absolute !important;
			top: 0 !important;
			right: 0 !important;
			z-index: 100 !important;
			opacity: .7 !important;
			border-radius: 22px !important;

			.action-item.action-item--single {
				width: 44px !important;
				height: 44px !important;
			}
		}

		.popover-loading-indicator {
			width: 100%;

			&__icon {
				margin: 0 auto;
				height: 62px;
				width: 62px;
				background-size: 62px;
			}
		}
	}

	&[x-out-of-boundaries] {
		margin-top: 75px;
	}
}

.event-popover[x-placement^='bottom'] {
	.popover__arrow {
		border-bottom-color: var(--color-background-dark);
	}
}

.calendar-picker-option {
	width: 100%;
	display: flex;
	align-items: center;

	&__color-indicator {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: none;
		margin-right: 8px;
		flex-basis: 12px;
		flex-shrink: 0;
	}

	&__label {
		overflow: hidden;
		text-overflow: ellipsis;
		flex-grow: 1;
	}

	&__avatar {
		flex-basis: 18px;
		flex-shrink: 0;
	}
}

.property-select-multiple-colored-tag {
	width: 100%;
	display: flex;
	align-items: center;

	&__color-indicator {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: none;
		margin-right: 8px;
	}
}

.invitees-list-button-group {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
}
